<template>
  <div class="navigation">
    <h2>{{ datas.name }}</h2>
    <el-tabs type="border-card" :stretch="true">
      <el-tab-pane label="内容">
        <div class="decorate-card">
          <el-form label-width="100px">
            <div class="title">背景设置</div>

            <!-- 背景颜色 -->
            <el-form-item label="背景颜色">
              <el-input v-model="datas.bgColor">
                <template #prepend>
                  <el-color-picker v-model="datas.bgColor"/>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="背景图片">
              <div class="sd-flex">
                <div class="choice-image choice-image-delete" @click="openFile('bg', 0)">
                  <el-image v-if="datas.bgImg != ''" :src="STATIC_URL + datas.bgImg" fit="cover" class="cover-image"/>
                  <el-icon v-else>
                    <ele-Plus/>
                  </el-icon>
                  <div class="delete-content" @click.stop="datas.bgImg = ''" v-if="datas.bgImg != ''">
                    <SvgIcon name="ele-DeleteFilled"></SvgIcon>
                  </div>
                </div>
              </div>
            </el-form-item>

            <div class="title">导航设置</div>
            <el-form-item label="导航主题">
              <el-radio-group v-model="datas.mode">
                <el-radio label="inner">inner</el-radio>
                <el-radio label="normal">normal</el-radio>
              </el-radio-group>

              <!-- <el-select v-model="datas.mode" clearable placeholder="Select" style="width: 100%">
                <el-option v-for="item in react.modes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
            </el-form-item>

            <el-form-item label="动态显示">
              <el-switch v-model="datas.alwaysShow" active-text="显示" inactive-text="隐藏" :active-value="1"
                         :inactive-value="0"/>
            </el-form-item>

            <el-form-item label="是否站位">
              <el-switch v-model="datas.placeholder" :active-value="1" :inactive-value="0" inline-prompt
                         active-text="是" inactive-text="否"/>
            </el-form-item>

            <el-form-item label="背景类型">
              <el-radio-group v-model="datas.type">
                <el-radio label="color">颜色</el-radio>
                <el-radio label="image">图片</el-radio>
              </el-radio-group>
              <!-- <el-select v-model="datas.type" clearable placeholder="Select" style="width: 100%">
                <el-option v-for="item in react.bg" :key="item.value" :label="item.label" :value="item.value" />
              </el-select> -->
            </el-form-item>

            <!-- 背景颜色 -->
            <el-form-item label="背景颜色" class="lef" v-if="datas.type == 'color'">
              <el-input v-model="datas.color">
                <template #prepend>
                  <el-color-picker v-model="datas.color" show-alpha></el-color-picker>
                </template>
              </el-input>
              <!-- 颜色选择器 -->
            </el-form-item>

            <el-form-item label="背景图片" v-else>
              <div class="sd-flex">
                <div class="choice-image choice-image-delete" @click="openFile('main', 0)">
                  <el-image v-if="datas.src != ''" :src="STATIC_URL + datas.src" fit="cover" class="cover-image"/>
                  <el-icon v-else>
                    <ele-Plus/>
                  </el-icon>

                  <div class="delete-content" @click.stop="datas.src = ''" v-if="datas.src != ''">
                    <SvgIcon name="ele-DeleteFilled"></SvgIcon>
                  </div>
                </div>
              </div>

              <!-- <div class="shop-head-pic" style="text-align: center">
                <el-image class="home-bg" :src="STATIC_URL + datas.src" fit="fill" v-if="datas.src" />
                <div class="shop-head-pic-btn" style="text-align: center">
                  <el-button @click="openFile(datas)" class="uploadImg" type="primary" plain>更换图片</el-button>
                  <el-button type="primary" @click="clear(datas)">清空图片</el-button>
                </div>
              </div> -->
            </el-form-item>
            <div class="title">小程序导航设置</div>
            <div class="content" v-for="(item, index) in datas.list.mp">
              <el-form-item label="导航类型" prop="mode">
                <el-radio-group v-model="item.type">
                  <el-radio label="search">搜索</el-radio>
                  <el-radio label="image">图片</el-radio>
                  <el-radio label="text">文字</el-radio>
                </el-radio-group>

                <!-- <el-select v-model="item.type" clearable placeholder="Select" style="width: 100%">
                  <el-option v-for="item in react.navTypes" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->
              </el-form-item>

              <el-form-item label="内容宽度">
                <el-slider v-model="item.width" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="内容高度度">
                <el-slider v-model="item.height" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="内容top">
                <el-slider v-model="item.top" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="内容left">
                <el-slider v-model="item.left" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="内容边框圆角">
                <el-slider v-model="item.borderRadius" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="占位符内容" v-if="item.type == 'search'">
                <el-input v-model="item.placeholder"></el-input>
              </el-form-item>

              <el-form-item label="站位图片" v-if="item.type == 'image'">
                <div class="sd-flex">
                  <div class="choice-image choice-image-delete" @click="openFile('small', index)">
                    <el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover"/>
                    <el-icon v-else>
                      <ele-Plus/>
                    </el-icon>

                    <div class="delete-content" @click.stop="item.src = ''" v-if="item.src != ''">
                      <SvgIcon name="ele-DeleteFilled"></SvgIcon>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="跳转地址" v-if="item.type == 'image' || item.type == 'text'">
                <el-input v-model="item.url">
                  <template #append>
                    <el-button class="ml5 mr5" @click="openChoiceData(index, 1)">选择</el-button>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="文字内容" v-if="item.type == 'text'">
                <el-input v-model="item.text">
                  <template #append>
                    <el-color-picker v-model="item.textColor"/>
                  </template>
                </el-input>
              </el-form-item>

              <div class="delete">
                <van-icon class="el-icon-circle-close" name="close" @click="deleteMp(index)" size="20"/>
              </div>
            </div>

            <el-button @click="addMp" class="mb20">新增小程序导航</el-button>

            <div class="title">H5导航设置</div>
            <div class="content" v-for="(item, index) in datas.list.h5">
              <el-form-item label="导航类型" prop="mode">
                <el-radio-group v-model="item.type">
                  <el-radio label="search">搜索</el-radio>
                  <el-radio label="image">图片</el-radio>
                  <el-radio label="text">文字</el-radio>
                </el-radio-group>

                <!-- <el-select v-model="item.type" clearable placeholder="Select" style="width: 100%">
                  <el-option v-for="item in react.navTypes" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->
              </el-form-item>

              <el-form-item label="内容宽度" class="lef-height">
                <el-slider v-model="item.width" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="内容高度度" class="lef-height">
                <el-slider v-model="item.height" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="内容top" class="lef-height">
                <el-slider v-model="item.top" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="内容left" class="lef-height">
                <el-slider v-model="item.left" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="内容边框圆角" class="lef-height">
                <el-slider v-model="item.borderRadius" :max="20" :min="0" show-input></el-slider>
              </el-form-item>

              <el-form-item label="占位符内容" class="lef-height" v-if="item.type == 'search'">
                <el-input v-model="item.placeholder"></el-input>
              </el-form-item>

              <el-form-item label="站位图片" v-if="item.type == 'image'">
                <div class="sd-flex">
                  <div class="choice-image choice-image-delete" @click="openFile('h5', index)">
                    <el-image v-if="item.src != ''" :src="STATIC_URL + item.src" fit="cover"/>
                    <el-icon v-else>
                      <ele-Plus/>
                    </el-icon>

                    <div class="delete-content" @click.stop="item.src = ''" v-if="item.src != ''">
                      <SvgIcon name="ele-DeleteFilled"></SvgIcon>
                    </div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item label="跳转地址" v-if="item.type == 'image' || item.type == 'text'">
                <el-input v-model="item.url">
                  <template #append>
                    <el-button class="ml5 mr5" @click="openChoiceData(index, 0)">选择</el-button>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label="文字内容" v-if="item.type == 'text'">
                <el-input v-model="item.text">
                  <template #append>
                    <el-color-picker v-model="item.textColor"/>
                  </template>
                </el-input>
              </el-form-item>

              <div class="delete">
                <van-icon class="el-icon-circle-close" name="close" @click="deleteH5(index)" size="20"/>
              </div>
            </div>
            <el-button @click="addH5" class="add">新增H5导航</el-button>
          </el-form>
        </div>
      </el-tab-pane>

      <el-tab-pane label="数据">
        <StyleComponentData :datas="datas"></StyleComponentData>
      </el-tab-pane>
    </el-tabs>

    <FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
    <PageData ref="PageDataRef" @choice="choicePage"></PageData>
  </div>
</template>

<script setup lang="ts" name="navigation">
import {reactive, ref, defineAsyncComponent} from 'vue';
import {STATIC_URL} from '/@/utils/config';

const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const props = defineProps({
  datas: {},
});

let item: any = null;
const FileChoiceRef = ref();

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));
const PageDataRef = ref();

// 'inner', 'normal'
let react = reactive({
  modes: [
    {
      value: 'inner',
      label: 'inner',
    },
    {
      value: 'normal',
      label: 'normal',
    },
  ],

  bg: [
    {
      value: 'color',
      label: '颜色',
    },
    {
      value: 'image',
      label: '图片',
    },
  ],

  navTypes: [
    {
      value: 'image',
      label: '图片',
    },
    {
      value: 'search',
      label: '搜索',
    },
  ],
  predefineColors: [
    // 颜色选择器预设
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    '#409EFF',
    '#909399',
    '#C0C4CC',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
  ],
});

let addMp = () => {
  props.datas.list.mp.push({
    width: 0,
    height: 1,
    top: 0,
    left: 0,
    type: 'search',
    text: '',
    textColor: '#111111',
    src: '',
    url: '',
    placeholder: '请输入关键字',
    borderRadius: 0,
  });
};

let addH5 = () => {
  console.log('新增H5导航');
  props.datas.list.h5.push({
    width: 0,
    height: 1,
    top: 0,
    left: 0,
    type: 'search',
    text: '',
    textColor: '#111111',
    src: '',
    url: '',
    placeholder: '请输入关键字',
    borderRadius: 0,
  });
};

let choiceImageIndex = 0;

let choiceImageType = 0;
let openFile = (type, index = 0) => {
  choiceImageType = type;
  choiceImageIndex = index;
  FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFile = (res: any) => {
  // console.log('res: ', res);
  // item.src = res.visitRelativePath;

  if (choiceImageType == 'main') {
    props.datas.src = res[0].visitRelativePath;
  } else if (choiceImageType == 'h5') {
    props.datas.list.h5[choiceImageIndex].src = res[0].visitRelativePath;
  } else if (choiceImageType == 'small') {
    props.datas.list.mp[choiceImageIndex].src = res[0].visitRelativePath;
  } else if (choiceImageType == 'bg') {
    props.datas.bgImg = res[0].visitRelativePath;
  }
};

const deleteH5 = (index: number) => {
  console.log('删除h5: ', index);
  props.datas.list.h5.splice(index, 1);
};
const deleteMp = (index: number) => {
  console.log('删除mp: ', index);
  props.datas.list.mp.splice(index, 1);
};

let choicePageIndex = 0;
let choicePageType = 0;
const openChoiceData = (index, type) => {
  PageDataRef.value.openDialog();
  console.log("type: ", type);
  choicePageIndex = index;
  choicePageType = type;
};

const choicePage = (res) => {
  console.log('choice page res: ', res);
  if (choicePageType == 0) {
    props.datas.list.h5[choicePageIndex].url = res.urlContent;
    // H5导航
  } else if (choicePageType == 1) {
    console.log("小程序： ", res.urlContent);
    props.datas.list.mp[choiceImageIndex].url = res.urlContent;
  }
};
</script>

<style scoped>
.navigation {
  width: 100%;
  /* padding: 0 10px 20px; */
  box-sizing: border-box;

  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }
}

.content {
  position: relative;
  border: 1px silver solid;
  padding: 5px;
  margin-bottom: 10px;

  &:hover {
    .delete {
      display: block;
    }
  }
}

.add {
  margin: 10px;
}

.delete {
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 1;
  cursor: pointer;
  opacity: 1;
  display: none;
}

.el-icon-circle-close {
  color: #95a5a6;
  background-color: white;
}

.el-tabs--border-card {
  :deep(.el-tabs__content) {
    padding: 0px !important;
  }

  border: 0px;

  :deep(.el-tabs__header) {
    background-color: #d9d9d9 !important;
  }
}

:deep(.el-input-group__prepend) {
  padding: 0px !important;
}

:deep(.el-input-group__append) {
  padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
  padding: 0px;
}

:deep(.el-color-picker__color) {
  border: 0px;
}
</style>
